<template>
	<view>
		<view class="top_home">
			<uni-search-bar placeholder="搜索更多门店" bgColor="#EEEEEE" @confirm="search" />
			<u-tabs :list="list1" :scrollable="false" lineWidth="30" lineColor="#FDCE9A" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.01)'
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
		</view>
		<view class="content" v-if="lookMap">
			<map style="width: 100%; height: 20vh;" :layer-style='5' :style="{height:'20vh'}" :show-location='true'
				:latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
				@callouttap='callouttap'>

			</map>
		</view>
		<view @click="lookMap=!lookMap" style="text-align: center;color: #C9C9C9;font-size: 15rpx;line-height: 20rpx;padding-top: 10rpx;">{{lookMap?'点击收起地图':'点击展开地图'}}
		</view>
		<view style="padding: 10rpx 0rpx 51rpx 29rpx;">
			<view class="card_item" v-for="item in 3" :key="item">
				<view class="card_top">
					<view style="padding: 12rpx 16rpx 16rpx 18rpx;display: flex;align-items: center;">
						<text style="color:#FDCE9A;font-size: 40rpx;font-weight: bold;"><text>0</text><text
								style="font-size: 30rpx;">{{item}}</text></text>&nbsp;&nbsp;<text
							style="color: #fff;padding-left: 9rpx;font-size: 25rpx;">氧舱深圳龙岗店</text>
						<u-tag text="营业中" type="warning" style="padding-left: 20rpx;" size="mini" plain></u-tag>
					</view>
					<view style="width: 25%;display: flex;justify-content: space-around;">
						<view>
							<image mode="aspectFit" src="../../static/yuyue/Frame.png"
								style="width: 30rpx;height: 30rpx;" />
						</view>
						<view>
							<image mode="aspectFit" src="../../static/yuyue/Frame (1).png"
								style="width: 30rpx;height: 30rpx;" />
						</view>
					</view>
				</view>
				<view
					style="display: flex;justify-content: space-between;padding: 24rpx 27rpx 27rpx 24rpx;font-size: 20rpx;align-items: center;">
					<view style="width: 431rpx;">
						<view>营业时间：9:00——23:30</view>
						<view style="padding-top: 21rpx;">直线距离2.3KM | 广东省深圳市龙岗区吉华街道 三联村龙景新村二区11巷8号</view>
					</view>
					<view>
						<view style="width: 99rpx;
height: 37rpx;
background: linear-gradient(180deg, #626262 0%, #000000 100%, #000000 100%);
border-radius: 100rpx;color: #fff;text-align: center;line-height: 37rpx;" @click="goyy">去预约</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import icon from '../../static/userinfo/Group 18.png'
	export default {
		data() {
			return {
				list1: [{
					name: '附近门店',
				}, {
					name: '联盟门店',
				}, {
					name: '常去门店'
				}],
				lookMap:false,
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 13, //缩放级别
				bottomData: false,
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: icon, //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: icon, //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 2,
						latitude: 23.1338, //纬度
						longitude: 113.33052, //经度
						iconPath: icon, //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '德隆大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 3,
						latitude: 23.136455, //纬度
						longitude: 113.329002, //经度
						iconPath: icon, //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '羊城国际商贸中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 4,
						latitude: 23.224781, //纬度
						longitude: 113.293911, //经度
						iconPath: icon, //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天瑞广场A座', //文本
							color: '#ffffff', //文字颜色
							fontSize: 16, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '12',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 5,
						latitude: 23.072726, //纬度
						longitude: 113.277921, //经度
						iconPath: icon, //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '大米和小米儿童康复(广州盈丰)中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '8',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
				],
			};
		},
		methods: {
			goyy() {
				uni.navigateTo({
					url: "./yuyue_detail/yuyue_detail"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.top_home {
		width: 100%;
		height: 171rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
	}

	.card_item {
		width: 694rpx;
		height: 237rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 6rpx 3rpx rgba(212, 212, 212, 0.25);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 41rpx;

		.card_top {
			width: 694rpx;
			height: 74rpx;
			line-height: 74rpx;
			background: #343334;
			border-radius: 20rpx 20rpx 0px 0px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>